<template>
    <!--弹出框组件-->
    <el-dialog
        :title="!dataForm.id ? '新增角色' : '修改角色'"
        :close-on-click-modal="false"
        draggable="true"
        v-model="visible"
        width="500px"
    >
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
            <el-form-item label="角色标识" prop="role" required>
                <el-input v-model="dataForm.role" size="medium" :readonly="dataForm.role === 'super' " clearable/>
            </el-form-item>

            <el-form-item label="角色名称" prop="name" required>
                <el-input v-model="dataForm.name"   size="medium" clearable/>
            </el-form-item>
        </el-form>

        <template #footer>
			<span class="dialog-footer">
				<el-button size="medium" @click="visible = false">取消</el-button>
				<el-button type="primary" size="medium" @click="submit">确定</el-button>
			</span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    name: "RoleForm.vue",
    data () {
        return {
            visible: false, //对话框是否显示v-model="visible"
            dataForm: { //表单数据
                id: null,
                name: null,
                role: null
            },
            dataRule: {
                role: [
                    {required: true, message: '角色标识是必填项'},
                    {min: 3, max: 20, message:'角色标识为3~20位字符'}
                ],
                name: [{required: true, message: '角色名称是必填项'}],
            }
        }
    },

    methods: {
        open(id) {
            if (!id && id !== 0) { //新增数据(0是超级管理员账号)
                //清空表单
                this.dataForm = {
                    id: null,
                    name: null,
                    role: null
                }
                this.visible = true;
            } else {
                //加载数据
                this.$http.get('/admin/role/selectById', {params: {
                    id: id
                }}).then((resp) => {
                    this.dataForm = resp.data
                })
                this.visible = true;
            }

        },

        submit() {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$http.post('/admin/role/saveOrUpdate', this.dataForm).then((resp) => {
                        if (resp.success) {
                            this.$message.success({
                                message: '操作成功'
                            })
                            this.visible = false; //表单对话框关闭
                            this.$emit('success'); //调用RoleView的方法，刷新表格
                        } else {
                            this.$message.error({ //提示错误信息
                                message: resp.message
                            })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>

</style>